import React, {useContext, useEffect} from 'react';
import { StatusBar, ImageBackground, View } from 'react-native';
import { Button, Image, Text } from 'react-native-elements';

import LocaleContext from '../libs/locale';
import bg from '../assets/Guest/bg.png';
import logo from '../assets/Guest/logo.png';
import AsyncStorage from "@react-native-async-storage/async-storage";

const Guest = ({ navigation }: any) => {
  const locale = useContext(LocaleContext);

  useEffect(() => {
      const work = async () => {
          await AsyncStorage.clear()
      }
      work()
  })

  return (
    <>
      <StatusBar barStyle='dark-content' translucent={true} backgroundColor="#FAFBFD00" />
      <ImageBackground source={bg} style={{
        height: 340,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
        <ImageBackground source={logo} style={{ width: 570 * 0.32, height: 99 * 0.32 }} />
        <Text style={{ fontSize: 18, color: '#8C8C8CFF', marginTop: 18 }}>{locale?._('Guest.slogan')}</Text>
      </ImageBackground>
      <View style={{
        marginTop: 60,
        display: 'flex',
        alignItems: 'center',

      }}>
        <Button
          title={locale?._('Guest.register')}
          onPress={() => navigation.navigate('Register')}
          buttonStyle={{ backgroundColor: '#7460E3FF' }}
        />
        <Button
          type="outline"
          title={locale?._('Guest.import')}
          onPress={() => navigation.navigate('Import')}
          buttonStyle={{borderColor:'#7460E3FF'}}
          titleStyle={{color:'#7460E3FF'}}
       />

      </View>
    </>
  );
};

export default Guest;
